<!doctype html>
<html>
<head>
    <title>Duo CloudMapper</title>
    <script src='/js/nprogress.js'></script>
    <link href='/css/nprogress.css' rel="stylesheet" type="text/css"/>

    <link href="/css/jquery.qtip.css" rel="stylesheet" type="text/css" />
    <link href="/css/cytoscape.js-panzoom.css" rel="stylesheet" type="text/css" />
    <link href="/css/font-awesome.css" rel="stylesheet" type="text/css" />

    <link href="/css/cytoscape.js-navigator.css" rel="stylesheet" type="text/css" />
    <link href="/css/akkordion.css" rel="stylesheet" type="text/css" />

    <link href="/css/cloudmap.css" rel="stylesheet" type="text/css" />

    <link rel="shortcut icon" type="image/x-icon" href="./favicon.ico"/>
</head>

<body>
    <div id="menu">
        <b id="hide" class="fa fa-eye-slash fa-lg tooltip"><span class="tooltiptext">Delete</span></b>
        <b id="showAll" class="fa fa-eye fa-lg tooltip"><span class="tooltiptext">Undelete all</span></b>
        &nbsp;  
        <b id="highlightNeighbors" class="fa fa-share-alt fa-lg tooltip"><span class="tooltiptext">Highlight neighbors</span></b>
        <b id="removeHighlights" class="fa fa-share-alt-square fa-lg tooltip"><span class="tooltiptext">Remove highlight of neighbors</span></b>
        &nbsp;
        <b id="collapseAll" class="fa fa-compress fa-lg tooltip"><span class="tooltiptext">Collapse all</span></b> 
        <b id="expandAll" class="fa fa-expand fa-lg tooltip"><span class="tooltiptext">Expand all</span></b>
        &nbsp;
        <b id="collapseRecursively" class="fa fa-minus fa-lg tooltip"><span class="tooltiptext">Collapse selected</span></b>
        <b id="expandRecursively" class="fa fa-plus fa-lg tooltip"><span class="tooltiptext">Expand selected</span></b>
        &nbsp;
        <b id="randomizeLayout" class="fa fa-gavel fa-lg tooltip"><span class="tooltiptext">Redraw with randomized layout</span></b>
        &nbsp;
        <b id="saveImage" class="fa fa-camera fa-lg tooltip"><span class="tooltiptext">Save as image</span></b>
        &nbsp; 
        <b id="exportLayout" class="fa fa-download fa-lg tooltip"><span class="tooltiptext">Export</span></b>
        <label for="fileUpload"><b id="importLayout" style="display: inline-block;" class="fa fa-upload fa-lg tooltip"><span class="tooltiptext">Import</span></b></label>
        <input type="file" id="fileUpload" style="display: none;" onchange="importLayout()">

        <div id="nodeInfo">
                <div id="nodeLocation">&nbsp;</div>
                <div class="akkordion" data-akkordion-single="true" data-akkordion-speed="200" id="nodeDescriptionHolder">
                    <div class="akkordion-title nodeHeader"><span id="nodeName">Welcome to CloudMapper</span></div>
                    <div class="akkordion-content frame akkordion-active" id="nodeDescription">
                        <div class="akkordion" data-akkordion-single="false" data-akkordion-speed="200" id="nodeDescriptionHolder">
                            <div class="akkordion-title">Summary</div>
                            <div class="akkordion-content akkordion-active" id="Summary">
                                Once the graph has loaded, click around on icons and expand these windows to learn more about the nodes.
                            </div>
                            <div class="akkordion-title">Details</div>
                            <div class="akkordion-content" id="Details">None</div>
                            <div class="akkordion-title">Neighbors</div>
                            <div class="akkordion-content" id="Neighbors"></div>
                            <div class="akkordion-title">Siblings</div>
                            <div class="akkordion-content" id="Siblings"></div>
                            <div class="akkordion-title">Children</div>
                            <div class="akkordion-content" id="Children"></div>
                        </div>
                    </div>
                </div>
        </div>
    </div>

    <div id="cy"></div>

    <script src='/js/cytoscape.min.js'></script>
    <script src="/js/jquery.min.js"></script>
    <script src="/js/jquery.qtip.js"></script>
    <script src='/js/dagre.js'></script>
    <script src='/js/cytoscape-dagre.js'></script>
    <script src='/js/cytoscape-cose-bilkent.js'></script>
    <script src='/js/cytoscape-grid-guide.js'></script>
    <script src='/js/cytoscape-qtip.js'></script>

    <script src="/js/cytoscape-panzoom.js"></script>
    <script src="/js/cytoscape-undo-redo.js"></script>
    <script src="/js/cytoscape-view-utilities.js"></script>
    <script src="/js/cytoscape-expand-collapse.js"></script>
    <script src="/js/cytoscape-navigator.js"></script>
    <script src="/js/cytoscape-autopan-on-drag.js"></script>

    <script src="/js/FileSaver.min.js"></script>
    <script src="/js/circular-json.js"></script>
    <script src="/js/mousetrap.min.js"></script>
    <script src="/js/akkordion.min.js"></script>

    <script src="/js/nodeInfo.js"></script>
    <script src="/js/cloudmap.js"></script>
</body>
</html>